<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> - 基本表单</title>
    <meta name="keywords" content="">
    <meta name="description" content="">

    <link rel="shortcut icon" href="../favicon.ico">
    <link rel="stylesheet" href="/Public/css/toast.css">
    <link rel="stylesheet" href="/Public/css/bootstrap.min.css">
    <link href="/Public/css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <link href="/Public/css/plugins/iCheck/custom.css" rel="stylesheet">
    <link href="/Public/css/animate.css" rel="stylesheet">
    <link href="/Public/css/style.css?v=4.1.0" rel="stylesheet">
    <link rel="stylesheet" href="/Public/css/bootstrap-grid.min.css">

    <style>
        .project-people, .project-actions {
            text-align: left;
            vertical-align: middle;
        }

        .modal-backdrop {
            position: relative;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            z-index: 1040;
            background-color: #000;
        }

        .notice_info {
            padding: 25px 2% 3%;
            color: #979797;
            float: left;
            width: 90%;
            background: #ffffff;
        }

        .input_info {
            display: flex;
            align-items: center;
            margin-bottom: 15px
        }

        .input_info input {
            padding: 5px 10px;
            width: 40%;
        }
        .input_info select {
            padding: 5px 10px;
            width: 40%;
        }

        .user_info_survey .title_div {
            display: inline-block;
            width: 15%;
            height: 100px;
            line-height: 100px;
            text-align: right;
            padding-right: 30px
        }

        .user_info_survey .title_div2 {
            width: 12%;
            height: 40px;
            line-height: 40px;
        }

        .urgency_ul li {
            color: #333333;
            margin-bottom: 10px;
        }

        .clearfloat:after {
            display: block;
            clear: both;
            content: "";
            visibility: hidden;
            height: 0
        }

        .clearfloat {
            background: white;
            zoom: 1
        }

        .pageJump input {
            width: 45px;
            height: 25px;
        }

        .btn_div {
            padding-left: 10%;
            margin-bottom: 2%;
        }

        .btn_div input {
            border-radius: 5px;
        }

        .common_btn {
            float: left;
            height: 30px;
            margin-right: 20px;
            border: solid 1px #ececec;
            color: #5d5e60;
            background: none;
        }

        .common_btn:hover {
            color: white;
            background: #abdde6;
            border: solid 1px #abdde6;
        }
        .recompense_btn{
            margin-left: 12%;
            background: #abdde6;
            color: white;
            border: solid 1px #abdde6;
        }
        /*上传*/
        .content{
            padding: 20px 0;
            display: flex;
            align-items: center;
            border-bottom: 1px #999 solid
        }
        .img-area{
            flex:1;
            display: flex;
        }
        .container{
            background-color:#e7e7e7;
            position: relative;
            width: 30%;
        }
        .container div{
            text-align: center;
            padding:0.5rem 0
        }
        .container input{
            opacity:0;
            filter:alpha(opacity=0);
            height: 100%;
            width: 100%;
            display: inline-block;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 9;
        }
        .container p{
            font-size: 0.9rem;
            color:#999
        }
        body{
            font-size: 12px;
        }
    </style>


</head>
<body class="gray-bg">
<div class="modal fade bs-example-modal-sm2" id="myModal" style="background: none" tabindex="-1"
     role="dialog" aria-labelledby="mySmallModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <form id="mainForm">
                <div class="content">
                    <div class="img-area" id="img-id-card">
                        <div class="container">
                            <input type="file" id='id-work1' name='face'  accept="image/*"  onchange="uploadImg(this,1)"/>
                            <div id='work-empty-result1'>
                                <img style='width:4rem;margin:20px 0 10px' src="/Public/image/camera.png" alt="">
                                <p>工作照一</p>
                            </div>
                            <img style='width: 100%' id='work-result1'/>
                        </div>
                        <div class="container">
                            <input type="file" id='id-work2' name='back' accept="image/*" onchange="uploadImg(this,2)" />
                            <div id='work-empty-result2'>
                                <img style='width:4rem;margin:20px 0 10px' src="/Public/image/camera.png" alt="">
                                <p>工作照二</p>
                            </div>
                            <img style='width: 100%' id='work-result2'/>
                        </div>
                        <div class="container">
                            <input type="file" id='id-work3' name='back' accept="image/*"  onchange="uploadImg(this,3)"/>
                            <div id='work-empty-result3'>
                                <img style='width:4rem;margin:20px 0 10px' src="/Public/image/camera.png" alt="">
                                <p>工作照三</p>
                            </div>
                            <img style='width: 100%' id='work-result3'/>
                        </div>
                    </div>
                </div>
            </form>
            <input style="margin:20px 0 0 0;" id="edit-photo" type="button" value="确定修改" />
        </div>
    </div>
</div>
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-content">
                    <form method="post" class="form-horizontal" onsubmit="return false">

                        <div class="form-group">
                            <label class="col-sm-2 control-label">工作照片</label>
                            <!--<img src="<{$data.img_one}>" height="165" width="150"/>-->
                            <div class="col-sm-10 project-people" style="display: inline-block;align-items: center" >
                                    <div class="user_box">

                                        <a href="<{$data.img_one}>" class="img_link" data-rel="colorbox"> <img src="<{$data.img_one}>" height="165" width="150"/></a>

                                            <a href="<{$data.img_two}>" class="img_link" data-rel="colorbox"> <img src="<{$data.img_two}>" height="165" width="150"/></a>

                                            <a href="<{$data.img_thr}>" class="img_link" data-rel="colorbox"> <img src="<{$data.img_thr}>" height="165" width="150"/></a>
                                        <span style="float: right;"> <input style="background: #abdde6;color: white" class="common_btn" type="button" data-toggle="modal"
                                                                            data-target=".bs-example-modal-sm2" value="修改"/></span>
                                    </div>
                            </div>

                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">工作电话</label>
                            <div class="col-sm-10">
                                <input id="work_phone" class="form-control"   type="text" placeholder="工作电话" value="<{$data.work_mobile}>">
                            </div>
                        </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">工作地址</label>
                                <div class="col-sm-10">
                                    <input class="form-control" type="text" placeholder="工作地址"  id="work_add" value="<{$data.work_address}>">
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-sm-2 control-label">工作职位</label>
                                <div class="col-sm-10">
                                    <input class="form-control" type="text" id="work_pos" placeholder="工作职位"
                                    value="<{$data.work_position}>">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">公司名称</label>
                                <div class="col-sm-10">
                                    <input class="form-control" type="text" placeholder="公司名称"  id="company" value="<{$data.work_company}>">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">月收入</label>
                                <div class="col-sm-10">
                                    <input class="form-control" type="text" id="income"  value="<{$data.monthly_income}>" >
                                </div>
                            </div>

                        <div class="form-group">
                                <label class="col-sm-2 control-label">渠道商</label>
                                <div class="col-sm-10">
                                    <input class="form-control" type="text"  value="<{$channel}>" readonly>
                                </div>
                            </div>

                        <div class="form-group">
                            <input style="background: #abdde6;color: white;right: 10px;float: right" class="common_btn" onclick="edit()" type="button" value="确定修改"/>
                            </div>

                    </form>

                </div>
            </div>

        </div>
    </div>
</div>
<!-- 全局js -->
<script src="/Public/js/jquery.min.js?v=2.1.4"></script>
<script src="/Public/js/bootstrap.min.js?v=3.3.6"></script>
<!-- 自定义js -->
<script src="/Public/js/toast.js"></script>

<script src="/Public/js/plugins/jquery.colorbox-min.js"></script>
<script src="/Public/js/layer/layer.js"></script>
<script type="text/javascript">
    $(function(){
        $(".body img").each(function(){
            if($.browser.msie){
                $(this).bind("mousewheel",function(e){
                    var e=e||event,v=e.wheelDelta||e.detail;
                    if(v>0)
                        resizeImg(this,false);
                    else
                        resizeImg(this,true);
                    window.event.returnValue=false;
                    return false;
                })
            }else{
                $(this).bind("DOMMouseScroll",function(event){
                    if(event.detail<0)
                        resizeImg(this,false);
                    else
                        resizeImg(this,true);
                    event.preventDefault();
                })
            }
        });

        function resizeImg(node,isSmall){
            if(!isSmall){
                $(node).height($(node).height()*1.2);
            }else{
                $(node).height($(node).height()*0.8);
            }
        }
    });
</script>
<script>
    //修改工作信息
    function edit() {
        var index = layer.load(1, {
            shade: [0.1, '#fff'] //0.1透明度的白色背景
        });

        var phone=$('#work_phone').val();
        var work_add=$('#work_add').val();
        var work_pos=$('#work_pos').val();
        var company=$('#company').val();
        var income=$('#income').val();

        console.log('56565',phone);

        if(phone=='' || work_add==''|| work_pos==''|| company==''|| income==''){
            layer.alert('请信息填写完整！', {title: '提示框', icon: 3});
            layer.close(index);
            return false;
        }
        var formData = new FormData();
        formData.append("work_mobile",phone);
        formData.append("work_address",work_add);
        formData.append("work_position",work_pos);
        formData.append("work_company",company);
        formData.append("monthly_income",income);
        formData.append("vid",vid);
        layer.alert('确定修改数据', {title: '提示框', icon: 3}, function (index) {

            $.ajax({
                url:"<{$SERVER_NAME}>/WorkCert/work_save",
                type: 'POST',
                cache: false,
                data: formData,
                timeout:180000,
                processData: false,
                contentType: false,
                success:function(r){
                    console.log('rrrrrrrrr',r);
                    if(r.code='1001'){
                        $('#img-id-card').toast({
                            content: '修改成功！',
                            duration: 1000
                        });

                        window.location.reload();

                    }else {
                        $('#img-id-card').toast({
                            content:r.result,
                            duration: 1000
                        });
                    }
                },
                error:function(r){
                    console.log('12121',r);
                }
            });

            layer.close(index);
        })
        layer.close(index);



    }

    var vid="<{$vid}>";


    window.onload=function(){
        // document.getElementById("id-work1").addEventListener("change", function(){
        //     onFileChange(this,"work-result1","work-empty-result1")
        // });
        // document.getElementById("id-work2").addEventListener("change", function(){
        //     onFileChange(this,"work-result2","work-empty-result2")
        // });
        // document.getElementById("id-work3").addEventListener("change", function(){
        //     onFileChange(this,"work-result3","work-empty-result3")
        // });
        document.getElementById("edit-photo").addEventListener("click", function(){
            edit_work_pic();//正面
        });
//        document.getElementById("edit-photo1").addEventListener("click", function(){
//            submit(2);
//        });
    };
    /**
     * 选中图片时的处理
     * @param {*} fileObj input file元素
     * @param {*} el //选中后用于显示图片的元素ID
     * @param {*} btnel //未选中图片时显示的按钮区域ID
     */
    function onFileChange(fileObj,el,btnel){
        var windowURL = window.URL || window.webkitURL;
        var dataURL;
        var imgObj = document.getElementById(el);
        document.getElementById(btnel).style.display="none";
        imgObj.style.display="block";
        if (fileObj && fileObj.files && fileObj.files[0]) {
            dataURL = windowURL.createObjectURL(fileObj.files[0]);
            imgObj.src=dataURL;
        } else {
            dataURL = fileObj.value;
            imgObj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
            imgObj.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = dataURL;
        }
    }
    
    /**
     * @method:uploadImg(obj:当前input，index：所选索引值):通过onchange事件获取上传的file,并判断图片格式是否满足上传条件
     * @method:imgPreview(file:图片信息，index：所选索引值): 将带上传的本地图片转换成base64位并判断大小是否满足300kb以内，若满足则不压缩，若不满足则执行compress方法
     * @method:compress(img：base64Data): 执行压缩方法，将大于300kb的图片进行压缩，压缩比0.5，压缩机制:通过cavans+base64重新绘制画布
     * @notice：压缩后的base64图片存储在对应的img:src内
    */
    function uploadImg(obj, index) {
        var picValue = obj.files[0]
        var AllImgExt = 'image/png|image/jpg|image/gif|image/png|image/jpeg|'
        if (AllImgExt.indexOf(picValue.type + '|') === -1) {
            layer.alert('该文件类型不允许上传', {title: '提示框', icon: 3});
        } else {
            imgPreview(picValue, index)
        }
    }
    function imgPreview (file, index) {
        // 看支持不支持FileReader
        if (!file || !window.FileReader) return

        if (/^image/.test(file.type)) {
            // 创建一个reader
            var reader = new FileReader()
            // 将图片2将转成 base64 格式
            reader.readAsDataURL(file)
            // 读取成功后的回调
            reader.onloadend = function () {
                var result = this.result
                var img = new Image()
                img.src = result
                // 判断图片是否大于100K,是就直接上传，反之压缩图片
                if (this.result.length <= (300 * 1024)) {
                    // 若出现 宽度小于高度
                    img.onload = function () {
                        // console.log('100kb-log: //////' + result)
                        $("#work-result"+index).attr('src',result)
                    }
                } else {
                    img.onload = function () {
                        var data = compress(img);
                        // console.log('100kb+log: //////' + data)
                        $("#work-result"+index).attr('src',data)
                    }
                }
            }
        } else {
            layer.alert('该文件类型不允许上传', {title: '提示框', icon: 3});
        }
    }

    function compress (img) {
        var canvas = document.createElement('canvas');
        var ctx = canvas.getContext('2d');
        // 瓦片canvas
        var tCanvas = document.createElement('canvas');
        var tctx = tCanvas.getContext('2d');
        var initSize = img.src.length;
        var width = img.width;
        var height = img.height;
        // 如果图片大于四百万像素，计算压缩比并将大小压至400万以下
        var ratio
        if ((ratio = width * height / 4000000) > 1) {
            console.log('大于400万像素')
            ratio = Math.sqrt(ratio);
            width /= ratio;
            height /= ratio;
        } else {
            ratio = 1;
        }
        canvas.width = width;
        canvas.height = height;
        // 铺底色
        ctx.fillStyle = '#fff';
        ctx.fillRect(0, 0, canvas.width, canvas.height);
        // 如果图片像素大于100万则使用瓦片绘制
        var count;
        if ((count = width * height / 1000000) > 1) {
            console.log('超过100W像素');
            count = ~~(Math.sqrt(count) + 1) ;// 计算要分成多少块瓦片
            // 计算每块瓦片的宽和高
            var nw = ~~(width / count);
            var nh = ~~(height / count);
            tCanvas.width = nw;
            tCanvas.height = nh;
            for (var i = 0; i < count; i++) {
                for (var j = 0; j < count; j++) {
                    tctx.drawImage(img, i * nw * ratio, j * nh * ratio, nw * ratio, nh * ratio, 0, 0, nw, nh);
                    ctx.drawImage(tCanvas, i * nw, j * nh, nw, nh);
                }
            }
        } else {
            ctx.drawImage(img, 0, 0, width, height);
        }
        // 进行最小压缩
        var ndata = canvas.toDataURL('image/jpeg', 0.5);
        console.log('压缩前：' + initSize);
        console.log('压缩后：' + ndata.length);
        console.log('压缩率：' + ~~(100 * (initSize - ndata.length) / initSize) + '%');
        tCanvas.width = tCanvas.height = canvas.width = canvas.height = 0;
        return ndata;
    }
    /**
     * 将图片压缩后返回base64格式的数据
     * @param {*} image img元素
     * @param {*} width 压缩后图片宽度
     * @param {*} height 压缩后图片高度
     * @param {*} qua //图片质量1-100
     */
    function compressImageTobase64(image,width,height,qua){
//        var canvas = document.createElement('canvas')
//        var ctx = canvas.getContext('2d')
//        // 瓦片canvas
//        var tCanvas = document.createElement('canvas')
//        var tctx = tCanvas.getContext('2d')
//        var initSize = img.src.length
//        var width = img.width
//        var height = img.height
//        // 如果图片大于四百万像素，计算压缩比并将大小压至400万以下
//        var ratio
//        if ((ratio = width * height / 4000000) > 1) {
//            console.log('大于400万像素')
//            ratio = Math.sqrt(ratio)
//            width /= ratio
//            height /= ratio
//        } else {
//            ratio = 1
//        }
//        canvas.width = width
//        canvas.height = height
//        // 铺底色
//        ctx.fillStyle = '#fff'
//        ctx.fillRect(0, 0, canvas.width, canvas.height)
//        // 如果图片像素大于100万则使用瓦片绘制
//        var count
//        if ((count = width * height / 1000000) > 1) {
//            console.log('超过100W像素')
//            count = ~~(Math.sqrt(count) + 1) // 计算要分成多少块瓦片
//            // 计算每块瓦片的宽和高
//            var nw = ~~(width / count)
//            var nh = ~~(height / count)
//            tCanvas.width = nw
//            tCanvas.height = nh
//            for (var i = 0; i < count; i++) {
//                for (var j = 0; j < count; j++) {
//                    tctx.drawImage(img, i * nw * ratio, j * nh * ratio, nw * ratio, nh * ratio, 0, 0, nw, nh)
//                    ctx.drawImage(tCanvas, i * nw, j * nh, nw, nh)
//                }
//            }
//        } else {
//            ctx.drawImage(img, 0, 0, width, height)
//        }
//        // 进行最小压缩
//        var ndata = canvas.toDataURL('image/jpeg', 0.3)
//        console.log('压缩前：' + initSize)
//        console.log('压缩后：' + ndata.length)
//        console.log('压缩率：' + ~~(100 * (initSize - ndata.length) / initSize) + '%')
//        tCanvas.width = tCanvas.height = canvas.width = canvas.height = 0
//        return ndata
        var quality = 100 ? 100 / 100 :1;
        var canvas = document.createElement("canvas"),
            ctx = canvas.getContext('2d');
        var w = image.naturalWidth,
            h = image.naturalHeight;
        canvas.width = w;
        canvas.height = h;
        ctx.drawImage(image, 0, 0, w, h, 0, 0, w, h);
        var data = canvas.toDataURL("image/jpeg", quality);
        return data;
    }

    function edit_work_pic() {

        var index = layer.load(1, {
            shade: [0.1, '#fff'] //0.1透明度的白色背景
        });

        //1、form提交
        //document.getElementById("mainForm").submit();
        //2、压缩后ajax提交
        var formData = new FormData();
        // 分别获取存储的base64位图片 
        var work1=$("#work-result1").attr('src')
        var work2=$("#work-result2").attr('src')
        var work3=$("#work-result3").attr('src')
        // if(str1=='AAP/2Q==' && str2=='AAP/2Q==' && str3=='AAP/2Q=='  ){
        //     layer.alert('请选择图片', {title: '提示框', icon: 3});
        //     layer.close(index);
        //     return false;
        // }
        if(!work1 && !work2 && !work3){
            layer.alert('无图', {title: '提示框', icon: 3});
            layer.close(index);
            return false;
        }
        if(!work1){
            work1='no';
        }  if(!work2){
            work2='no';
        }  if(!work3){
            work3='no';
        }
//        formData.append("img_one",work1? work1.split(',')[1]:'no');
//        formData.append("img_thr",work3? work3.split(',')[1]:'no');
//        formData.append("img_two",work2? work2.split(',')[1]:'no');
        formData.append("img_one",work1);
        formData.append("img_thr",work3);
        formData.append("img_two",work2);

        console.log('999',work1);
        console.log('888',work2);
        console.log('777',work3);

        formData.append("vid",vid);
        //需引入jQuery
        layer.alert('确定修改数据', {title: '提示框', icon: 3}, function (index) {

            $.ajax({
                url:"<{$SERVER_NAME}>/WorkCert/work_pic_save",
                type: 'POST',
                cache: false,
                data: formData,
                timeout:180000,
                processData: false,
                contentType: false,
                success:function(r){
                    console.log('rrrrrrrrr',r);
                    if(r.code='1001'){
                        $('#img-id-card').toast({
                            content: '修改成功！',
                            duration: 1000
                        });

                        window.location.reload();

                    }else {
                        layer.alert(data.result, {title: '提示框', icon: 3});
                    }
                },
                error:function(r){
                    console.log('12121',r);
                }
            });

            layer.close(index);
        })
        layer.close(index);

    }



    jQuery(function ($) {
        colorbox_params = {
            reposition: true,
            scalePhotos: true,
            scrolling: false,
            previous: '<i class="fa fa-chevron-left"></i>',
            next: '<i class="fa fa-chevron-right"></i>',
            close: '&times;',
            current: '{current} of {total}',
            maxWidth: '80%',
            maxHeight: '80%',
            onOpen: function () {
                document.body.style.overflow = 'hidden';
            },
            onClosed: function () {
                document.body.style.overflow = 'auto';
            },
            onComplete: function () {
                $.colorbox.resize();
            }
        };

        $('.Info_style [data-rel="colorbox"]').colorbox(colorbox_params);
        $('.project-people [data-rel="colorbox"]').colorbox(colorbox_params);
        $("#cboxLoadingGraphic").append("<i class='icon-spinner orange'></i>");
    });
    $('.example img').zoomify();
</script>
</body>
</html>
